Ext.ns("com.quizzpot.tutorial");
Ext.Loader.setConfig({ enabled: true });



Ext.define('modelMenus', {
    extend: 'Ext.data.Model',
    /*fields: [
        { name: 'text', type: 'string', mapping: 'Text' },
        { name: 'leaf', type: 'boolean', mapping: 'Leaf' },
        { name: 'panel', type: 'string'}
    ]*/
    fields: ['nombre', 'hoja', 'leaf']
});



com.quizzpot.tutorial.BorderLayoutTutorial = {
	init: function(){
		
		
		//para que funcionen los toolTips
        Ext.QuickTips.init();
		
		
		this.store = Ext.create('Ext.data.TreeStore', {
			model: 'modelMenus',
			//idProperty: 'id',
			//autoLoad: true,
			proxy: {
				type: 'ajax',
				url: '/menus/traerMenus',
				reader: {
					type: 'json',
					root: 'nodos'
				}
			}, 
			
			
			listeners: {
        
				// Each demo.UserModel instance will be automatically 
				// decorated with methods/properties of Ext.data.NodeInterface 
				// (i.e., a "node"). Whenever a UserModel node is appended
				// to the tree, this TreeStore will fire an "append" event.
				append: function( thisNode, newChildNode, index, eOpts ) {
					console.log('estoy en la función append!!!!!');
					console.log(newChildNode);
					
					// If the node that's being appended isn't a root node, then we can 
					// assume it's one of our UserModel instances that's been "dressed 
					// up" as a node
					if( !newChildNode.isRoot() ) {
						
						console.log('voy a hacer add de un nodo que no es root!!!!!');
						console.log(newChildNode);
						
						// The node is a UserModel instance with NodeInterface
						// properties and methods added. We want to customize those 
						// node properties  to control how it appears in the TreePanel.
						
						// A user "item" shouldn't be expandable in the tree
						newChildNode.set('leaf', true);
						
						// Use the model's "name" value as the text for each tree item
						newChildNode.set('text', newChildNode.get('nombre'));
						
						// Use the model's profile url as the icon for each tree item
						//newChildNode.set('icon', newChildNode.get('profile_image_url'));
						//newChildNode.set('cls', 'demo-userNode');
						//newChildNode.set('iconCls', 'demo-userNodeIcon');
					}
				}
			}
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			/*root : {
				text:'Informacion',
				expanded: true,
				children:
				[
					{
						text:'Administración del Sistema',
						
						children:[
							{ text: "Administración de Usuarios", panel: 'AdmUsers', leaf: true }
							
						]
					},{
						text:'Módulo de Desarrollo',
						children:[
							{text:'Administación de Roles',panel:'AdmRoles',leaf:true},
							{text:'Administración de Atributos', panel:'AdmAtributos' ,leaf:true},
							{text:'Administación de Fases', panel:'AdmFases' ,leaf:true}
						]
					}
				]
			}*/
		});
		
		
		
		
		/*this.store.setRootNode({
			text: 'Menus',
			leaf: false,
			expanded: false // If this were true, the store would load itself 
							// immediately; we do NOT want that to happen
		});*/
		
		
		
		//code goes here
		
		//creacion del tree
		this.tree= new Ext.tree.TreePanel({
			//border:false,
			id:'navegacionTree',
			title:'Navegación',
			autoScroll:true,
			layout:'fit',
			//root:this.getData(),
			
			//store:this.store,
			
			store: 
			{
				root: {
					text: 'Menus',
					expanded: true
				},
				proxy: {
					type: 'ajax',
					url: '/menus/traerMenus',
				}
			},
			
			
			
			//width: 250,
			height: 300,
			//rootVisible: false,
			//hidden: true,
			
			
			
			listeners: {
				afterrender: function() {
					this.getEl().setStyle('height', 'auto');
					this.body.setStyle('height', 'auto');
					this.getView().getEl().setStyle('height', 'auto');
					
				},
				
				itemClick:{
					scope:this,
					fn:function(view, record, item, index, e){
						//console.log(view, record, item, index, e);
						console.log(record)
						console.log(record.raw.panel)
						console.log(index)
						console.log(e)
					
						//Ext.Msg.alert('Estoy itemClick, node.id-->');
						//addTab(record);		
						if( record.data.depth != 1){
							this.addTab(record);	
						}
						
						
					
					}
				}	
					
				
				
			}
		});
		
		//cracion de el primer tab
		var home= new Ext.Panel({
			title	: "home",
			html:"home page" 
		});
		//ponemos el tab en una barra para ponerlo en algun lado
		this.tabs= new Ext.TabPanel({
			border:false,
			activeTab:0,
			enableTabScroll	:  true, //hacemos que sean recorridas
			items:[home]
		});
		
		
		this.toolBarNorte = Ext.create('Ext.toolbar.Toolbar',{
			height: 30,
			items : 
			[
				{
					xtype:'tbtext',
					id: 'nombreText',
					text: 'Usuario: ' + usuarioLogeado,
					cls:'usuario',
					padding: '0 0 0 20'},
				'->', 
				{
					text:'Cerrar sesión',
					//icon: '/extjs/examples/shared/icons/fam/cross.gif',
					tooltip: 'Haga clic aquí para salir',
					handler: function(button, event){
					window.location = '/logout';
					}
				} 
			]
		});
		
		
		
		
		
		
		
		
		
		
		var center = {
			xtype	:	"panel",
			region	:	"center",
			layout	:	"fit",
			border	:	false,
			margins	:	{bottom:3,right:3},
			/*items	:	[{
				xtype	:	"tabpanel",
				region	:	"center",
				items:[this.tabs]//<--- dentro de la región central normalmente va el contenido principal, así que poner ahi los tabs tiene mucho sentido.
			}]*/
			/*xtype: 'tabpanel',
            region: 'center',
            margins: '5 5 5 5'
            //items:[this.tabs]*/
			items:[this.tabs]
		};

		var west = {
			xtype	:	"panel",
			region	:	"west",
			width	:	260,
			split	:	true,
			collapsible:true,
			title	:	"Opciones",
			margins	:	"0 0 3 3",
			//layout: 'fit'
			items	:   [this.tree],//metemos el tree en la parte oeste... 
		};

		var north = {
			xtype	:	"panel",
			region	:	"north",
			height	:	30,
			//html	:	"North region",
			margins	:	{top:3,bottom:3,left:3,right:3},
			items: [this.toolBarNorte]
		};
		
		var main = new Ext.Panel({
			renderTo	: 	"content",
			layout		:	"border",
			height		:	600,
			items		:	[center,west,north]
		});
		
	},
	
	addTab: function(node){  
		
		var cls = "App.view." + node.raw.panel;
		var id = node.raw.panel;
		
		console.log(id);
		
		var tab = this.tabs.child('#' + id);
		
		console.log(tab);
		console.log(node.raw.text);
		
		if(!tab){
			//Ext.Msg.alert('Entre en el if de !tab');
			tab = this.tabs.add(Ext.create(cls, {
                itemId: id,
                title: node.raw.text,
                closable: true
			}));	
		}
		this.tabs.setActiveTab(tab);
		
		
		
		
		
		
		
		//this.tabs.setActiveTab(tab); //activa el tab que se ha clickeado
		/*rec = node;
		var id = rec.raw.panel;
        var cls = "App.view." + id;
        var tabs = Ext.getCmp('tabs');//this.getTabs();
        var tab = tabs.child('#' + id);
 
        if (!tab) {
            tab = tabs.add(Ext.create(cls, {
                itemId: id,
                title: rec.get('text')
            }));
        }
        tabs.setActiveTab(tab);*/
	
	
	},
	
	//la informacion que sera introducida al tree	
}//fin clase


Ext.onReady(
com.quizzpot.tutorial.BorderLayoutTutorial.init,com.quizzpot.tutorial.BorderLayoutTutorial
);
